<template>
  <div>
    <div class="user_info">
      <div class="flex_start container">
        <div class="leftView" @click="toEditOrg">
          <img class="avatar" src="/web-hft-ee/static/img/default_company_head_portrait.png" v-real-img="enterpriseInfo.pic"/>
        </div>
        <div class="rightView">
          <div class="flex_start" @click="toEditOrg">
            <p class="enterpriseName ellipsis1">{{enterpriseInfo.enterpriseName}}</p>
<!--            <img class="editImg" src="/web-hft-ee/static/img/orgCenter/edit_org.png">-->
          </div>
          <div v-if="isExpire" class="vipExpiretime" @click="toLevelUp">
            <span>套餐已过期</span>
            <span class="renew">续费</span>
          </div>
          <div v-else-if="buyInfo.subscriptionId === 45" class="vipExpiretime">
            <span>当前为试用版本</span>
            <span v-if="toBeExpire !== -1">套餐还剩{{toBeExpire}}天到期</span>
          </div>
          <p v-else-if="buyInfo.subscriptionId === 0" class="vipExpiretime">尚未开通企业套餐</p>
          <p v-else-if="toBeExpire === -1" class="vipExpiretime">有效期至{{expireTime}}</p>
          <div v-else class="vipExpiretime" @click="toLevelUp">
            <span>套餐还剩{{toBeExpire}}天到期</span>
            <span class="renew">续费</span>
          </div>
        </div>
      </div>
      <div class="steps">
        <div>
          <van-progress :percentage="percentage" :track-color="'#D8D8D8'" :color="'#D5B67F'" :stroke-width="'2px'"
                        :pivot-text="' '"/>
        </div>
        <div class="flex_between orgText">
          <div :class="buyInfo.subscriptionId === 45 ? 'activeOrg' : 'inactiveOrg'">试用企业</div>
          <div class="text_center" :class="buyInfo.subscriptionId === 46 ? 'activeOrg' : 'inactiveOrg'">黄金企业</div>
          <div class="text_center" :class="buyInfo.subscriptionId === 47 ? 'activeOrg' : 'inactiveOrg'">白金企业</div>
          <div class="text_right" :class="buyInfo.subscriptionId === 48 ? 'activeOrg' : 'inactiveOrg'">钻石企业</div>
        </div>
      </div>
      <div class="imgBox" @click="toLevelUp">
        <img :src="orgImg" class="imgView">
      </div>
    </div>
  </div>
</template>

<script>
  import {Progress} from 'vant';
  import {formatDate} from '../../../../utils/format_utils'

  Vue.use(Progress);

  export default {
    name: "TopInfo",
    props: {
      enterpriseInfo: {
        type: Object,
        default: {},
      },
      buyInfo: {
        type: Object,
        default: {},
      },
      isExpire: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {}
    },
    computed: {
      percentage() {
        let percent = 0;
        switch (Number(this.buyInfo.subscriptionId)) {
          case 45:
            percent = 15;
            break;
          case 46:
            percent = 40;
            break;
          case 47:
            percent = 65;
            break;
          case 48:
            percent = 100;
            break;
          default:
            percent = 0
        }
        return percent
      },
      orgImg() {
        let imgSrc = '';
        switch (Number(this.buyInfo.subscriptionId)) {
          case 0:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_not_available_card.png';
            break;
          case 45:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_try_out_card.png';
            break;
          case 46:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_gold_card.png';
            break;
          case 47:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_platinum_card.png';
            break;
          case 48:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_diamond_card.png';
            break;
          default:
            imgSrc = '/web-hft-ee/static/img/orgCenter/corporate_center_try_out_card.png'
        }
        return imgSrc
      },
      expireTime() {
        if (this.buyInfo.endDateLong && this.buyInfo.endDateLong != 0) {
          return formatDate(this.buyInfo.endDateLong, 'YYYY年MM月DD日')
        } else {
          return ''
        }

      },
      toBeExpire() {
        let time = (new Date()).getTime();
        let twentyTime = 86400000 * 20;
        if (this.buyInfo.endDateLong && this.buyInfo.endDateLong != 0) {
          if (time <= this.buyInfo.endDateLong) {
            if (this.buyInfo.endDateLong - time <= twentyTime) {
              let day = (this.buyInfo.endDateLong - time) / 86400000;
              console.log('day',day);
              return parseInt(day)
            }
          }
        }
          return -1
        },
      },
      methods: {
        toEditOrg() {
          // this.$emit('toEditOrg')
        },
        toLevelUp() {
          this.$emit('levelUp')
        }
      }
    }
</script>

<style scoped>
  .user_info {
    background-image: url("/web-hft-ee/static/img/orgCenter/topInfoBackground.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 238px;
  }

  .avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
  }


  .editImg {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-top: 10px;
  }

  .enterpriseName {
    width: auto;
    font-size: 16px;
    color: #D5B67F;
    font-family: PingFang-SC-Bold;
    margin-top: 5px;
    max-width: 85%;
  }

  .vipExpiretime {
    width: auto;
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 2px;
  }

  .container {
    margin-bottom: 24px;
    padding-top: 24px;
    margin-left: 24px;
    height: 48px;
  }

  .rightView {
    width: 100%;
    margin-left: 8px;
  }

  .steps {
    width: auto;
    /*margin-top: 20px;*/
    margin-left: 24px;
    margin-right: 24px;
    height: 27px;
  }

  /deep/ .van-progress .van-progress__pivot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #D5B67F;
    min-width: 8px !important;
    padding: 0px 0px !important;
  }

  .orgText {
    color: #FFFFFF;
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
    align-items: center;
  }

  .activeOrg {
    width: 25%;
    font-size: 14px;
    font-family: PingFang-SC-Bold;
  }

  .inactiveOrg {
    width: 25%;
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    opacity: 0.5;
  }

  .imgView {
    width: 327px;
    height: 184px;
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
  }

  .imgBox {
    width: 327px;
    height: 184px;
    position: relative;
    margin: 20px auto 0;
  }

  .text_right {
    text-align: right;
  }

  .text_center {
    text-align: center;
  }

  .renew {
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: #FFFFFF;
    background: #D5B67F;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 12px;
    padding-top: 1px;
    margin-left: 8px;
  }
</style>
